<template>
  <el-row>
    <el-col :span="24">
      <div v-for="(item, index) in fieldObject" :key="index" class="vertical-align-top">
        <div class="line multi-box right-space">
          <KindEditor :content.sync="fieldObject[index].value" editor-type="Input"/>
        </div>
        <div class="line vertical-align-top">
          <el-button circle icon="el-icon-delete" size="small" title="删除" type="danger"
                     @click.stop="deleteValue(index)"></el-button>
          <el-button :disabled='index === 0' circle icon="el-icon-top" size="small" title="上移"
                     @click.stop="moveUp(index)"></el-button>
          <el-button :disabled='index === fieldObject.length - 1' circle icon="el-icon-bottom" size="small" title="下移"
                     @click.stop="moveUp(index + 1)"></el-button>
        </div>
      </div>
      <div class="line vertical-align-top">
        <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addValue">新增</el-button>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'MultiObjectBox',
  props: {
    fieldObject: {
      type: Array,
      default: [],
    }
  },
  methods: {
    addValue() {
      this.fieldObject.push({
        isbn: '',
        name: '',
        category: 4,
        version: '',
        type: 1,
        value: ''
      })
    },
    deleteValue(index) {
      this.fieldObject.splice(index, 1)
    },
    moveUp(index) {
      let preItem = this.fieldObject[index - 1]
      this.fieldObject.splice(index - 1, 1, this.fieldObject[index])
      this.fieldObject.splice(index, 1, preItem)
    }
  }
}
</script>
<style scoped>
.line {
  display: inline-block;
}

.right-space {
  margin-right: 10px;
}

.multi-box {
  width: 300px;
}

.img-preview-block img {
  max-width: 600px;
  max-height: 600px;
}

.vertical-align-top {
  vertical-align: top;
}

</style>
